<script setup>
import { ref } from "vue";

const onPClick = () => {
  console.log("p click");
}

const onDivClick = () => {
  console.log("div click");
}

</script>

<template>
  <!-- 事件修饰符 -->
  <div @click="onDivClick">
    <!-- .prevent: 阻⽌默认⾏为 -->
    <a href="https://baidu.com" @click.prevent.stop>百度⼀下</a>
    <p @click.stop="onPClick"></p>
  </div>
</template>

<style scoped>
div {
  width: 400px;
  height: 200px;
  background: plum;
}
div a {
  display: block;
  width: 100px;
  text-decoration: none;
  background: tomato;
  text-align: center;
  color: #fff;
}
div p {
  width: 200px;
  height: 100px;
  background: rebeccapurple;
}
</style>
